| デザインからテクニックまで、魅力的なホームページの作り方を紹介していくこのコーナー、記念すべき第1回は写真画像の「影」の処理です。
アルバムやカタログなど、同じサイズの写真を並べるとき、ただ並べただけでは芸がありません。それぞれの写真に影をつけるだけで、質感も立体感も違ってくるのです。たいていのグラフィックソフトには、画像に影をつける「ドロップシャドウ」という機能がついていますが、いちいち画像処理するのも面倒だし、元画像がJPEG形式の場合は再圧縮すると画像が劣化してしまいます。 そこで、テーブルの背景に「影」の画像を置き、その上に写真をのせてみましょう。同じサイズの写真を入れかえることが多い場合には、とても便利です。サンプルページにサンプル画面とソースをアップしているので、そちらもご覧ください。 |
 |
 |
 |
|
| まず、テーブルのサイズを決めましょう。1ページにどれぐらいの大きさの写真を何枚並べるか、テキストはどれぐらいつけるか、などを考えてテーブルの大きさを指定します。 |
 |
|
|
 |
|
| ここでは、[shadow.gif]を作ります。テーブルにはタイリングという、同じ画像を繰り返し表示する性質があるので、shadow.gifは背景として表示するテーブルのセル(<td>タグ)と同じサイズか少し大きめにします。
|
||
|
 |
|
| テーブルを組むときに、[shadow.gif]を<td>タグのbackground属性を使って配置します。このとき、<td>タグのサイズ指定は必須です。 |
||
|
 |
 |
| 最後に、写真画像を読み込みます。これは<img src＝"XXXXX">のタグを使って、XXXXX部分に読み込むファイル名を入れます。写真画像が違う階層のフォルダにあるときはパスで表示します。例えば、表示するmain.htmlを置いてあるフォルダの下のimagesフォルダにphoto01.jpgがある場合は、<img src="images/photo01.gif">と書きます。
ブラウザで読み込めば、[shadow.gif]の上に[photo01.jpg]が表示され、影付きの写真に見えるようになります。 |
||